<template>
  <div>
    <div class="banner linear-bg-blue">
      <div class="search">
        <img
          src="/static/assets/icon/kdb.png"
          mode="widthFix"
          class="search-btn"
        />
        <input
          v-model="navName"
          class="search-ipt"
          type="text"
          placeholder="功能搜索"
          placeholder-class="placeholder-part"
        />
      </div>
    </div>
    <div class="order-panel">
      <div class="shop-info">
        <img :src="account.logo" mode="aspectFill" class="logo" />
        <span>{{account.shopName}}</span>
      </div>
      <div class="order-link">
        <a v-for="item in orderType" :key="item.key" href="#" class="link">
          <p class="order-num">{{orderCountForm[item.key]}}</p>
          <span class="order-state">{{item.name}}</span>
        </a>
      </div>
    </div>
    <div class="nav-wrap">
      <a
        v-for="(item,idx) in showList"
        :key="idx"
        :href="item.url"
        class="nav-link"
      >
        <img :src="item.icon" mode="widthFix" class="nav-icon" />
        <span class="nav-name">{{item.word}}</span>
      </a>
    </div>
  </div>
</template>

<script>
import {} from '@/utils'
import { FIND_SHOP_ORDER_PAGE } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      navName: '',
      orderType: [
        { name: '待付款', key: '0' },
        { name: '待发货', key: '1' },
        { name: '已收货', key: '3' },
        { name: '退款/售后', key: '4,5,8' }
      ],
      navList: [
        {
          word: '我要核销',
          pinyin: 'woyaohexiao',
          icon: '/static/assets/icon/nav1.png',
          url: '/pages/shop-management/my-verification/main'
        },
        {
          word: '店铺装修',
          pinyin: 'dianpuzhuangxiu',
          icon: '/static/assets/icon/nav2.png',
          url: '/pages/shop-management/shop-fitment/main'
        },
        {
          word: '商品管理',
          pinyin: 'shangpinguanli',
          icon: '/static/assets/icon/nav3.png',
          url: '/pages/shop-management/goods-management/index/main'
        },
        /* {
          word: '营销工具',
          pinyin: 'yingxiaogongju',
          icon: '/static/assets/icon/nav4.png',
          url: null
        },
        {
          word: '分销市场',
          pinyin: 'fenxiaoshichang',
          icon: '/static/assets/icon/nav5.png',
          url: null
        }, */
        {
          word: '上架商品',
          pinyin: 'shangjiashangpin',
          icon: '/static/assets/icon/nav6.png',
          url: '/pages/shop-management/goods-management/info/main'
        },
        /* {
          word: '评价管理',
          pinyin: 'pingjiaguangli',
          icon: '/static/assets/icon/nav7.png',
          url: null
        }, */
        {
          word: '会员管理',
          pinyin: 'huiyuanguanli',
          icon: '/static/assets/icon/nav8.png',
          url: '/pages/shop-management/vip-admin/main'
        },
        {
          word: '线下收款码',
          pinyin: 'xianxiashoukuanma',
          icon: '/static/assets/icon/nav9.png',
          url: '/pages/mine/shop-config/qr-code/main'
        }
      ],
      orderCountForm: {
        '0': 0,
        '1': 0,
        '3': 0,
        '4,5': 0
      }
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    showList () {
      let reg = new RegExp(this.navName.replace(/[.'?^$+]/g, ''))
      return this.navList.filter(_ => {
        let word = reg.test(_.word) // 中文
        let pinyin = reg.test(_.pinyin) // 拼音
        return word || pinyin
      })
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.initOrderCount()
  },
  methods: {
    initOrderCount () {
      const vm = this

      let list = vm.orderType.map(_ => _.key)
      list.forEach(_ => {
        vm.shopOrderCount(_)
      })
    },
    shopOrderCount (state) {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        state
      }

      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.orderCountForm[state] = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.banner {
  height: 100px;
  > .search {
    display: flex;
    align-items: center;
    > .search-btn {
      width: 50px;
      margin-right: 5px;
    }
    > .search-ipt {
      width: calc(100% - 100px);
      background-color: $white;
      font-size: 15px;
      padding: 2px 15px;
      border-radius: 20px;
      color: $black;
    }
  }
}
.order-panel {
  background: $white;
  border-radius: 8px;
  font-size: 15px;
  padding: 15px;
  position: absolute;
  width: calc(100% - 40px);
  left: 20px;
  top: 60px;
  box-shadow: 0px 3px 8px $light-black;
  > .shop-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    > .logo {
      width: 24px;
      height: 24px;
      margin-right: 5px;
      border-radius: 4px;
    }
  }
  > .order-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .link {
      width: 25%;
      text-align: center;
      > .order-num {
        font-size: 18px;
      }
      > .order-state {
        font-size: 12px;
      }
    }
  }
}
.nav-wrap {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin-top: 80px;
  > .nav-link {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 15px;
    width: 25%;
    > .nav-icon {
      width: 80%;
    }
    > .nav-name {
      font-size: 12px;
      margin-top: 10px;
    }
  }
}
</style>
